{% extends 'Base.html' %}
{% load static %}
{% block pagetitle %} 订票{% endblock %}
{% block content %}
    <style type="text/css">

        .front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0;	color: #666;text-align: center;padding: 3px;border-radius: 5px;}
        .booking_area {float: right;position: relative;width:200px;height: 450px;top:20px; }
        .booking_area h3 {margin: 5px 5px 0 0;font-size: 16px;}
        .booking_area p{line-height:26px; font-size:16px; color:#999}
        .booking_area p span{color:#666}
        div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;}
        div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
        div.seatCharts-row {height: 35px;}
        div.seatCharts-seat.available {background-color: #B9DEA0;}
        div.seatCharts-seat.focused {background-color: #76B474;border: none;}
        div.seatCharts-seat.selected {background-color: #E6CAC4;}
        div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;}
        div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;}
        div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;}
        ul.seatCharts-legendList {padding-left: 0px;}
        .seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;}
        span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;}
        .checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer}
        #seats_chose {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;}
        #seats_chose li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}
    </style>
    <link rel="stylesheet" type="text/css" href="{% static "css/seat.css" %}" />
    <div class="container">
        <div class="demo clearfix">
            <!---左边座位列表----->
            <div id="seat_area">
                <div class="front">屏幕</div>
            </div>
            <!---右边选座信息----->
            <div class="booking_area">
                <p>电影：<span>{{ mov_name }}</span></p>
                <p>时间：<span>{{ session_time }}</span></p>
                <p class ="dingpiao">座位：</p>
                <ul id="seats_chose"class="dingpiao"></ul>
                <p>票数：<span id="tickects_num">0</span></p>
                <p>总价：<b>￥<span id="total_price">0</span></b></p>
                <input type="button" onclick="checkon()" class="btn_dingp" value="确定购买"/>
                <div id="legend"></div>
            </div>
        </div>
        <div class="modal fade" id="payModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">支付订单</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body .modal-dialog-centered">
                        <img class="m-auto" src="{% static "imag/测试二维码.png" %}">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        <button type="button" onclick="checktic()" class="btn btn-primary">完成支付</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="{% static "js/jquery.seat-charts.min.js" %}"></script>
    <script type="text/javascript">
    var seatselect = []
    var price = {% autoescape off %}{{ price }}{% endautoescape %}; //电影票价
    function checkon(){
        if($('#tickects_num').text() === "0"){
            alert("请选择座位")
        }
        else if(Number($('#tickects_num').text())>4){
            alert("最多订4张票")
        }
        else {
            $("#payModal").modal("show")
        }
    }
    function checktic(){
        if($.cookie('is_login') === "True"){
            //发起ajax请求完成订票
            //获取信息 session_id
            session_id = window.location.href
            session_id = session_id.split("/")
            session_id = parseInt(session_id[4])
            seat = seatselect.toString()
            path = window.location.href
            datafom = new FormData()
            datafom.append('session_id',session_id)
            datafom.append('seat',seat)
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: path ,
                async:false,
                processData: false,
                contentType: false,
                data: datafom,
                success: function (result) {
                    if(result['msg'] === 'success')
                    {
                        //跳转页面
                        window.history.back()
                    }
                    else{
                        alert("后端错误")
                    }
                },
                error : function(result) {
                    alert("前端错误")
                }
            });

        }
        else{
            alert("请先登录")
        }
    }
    list = {% autoescape off %}{{ unavailable }}{% endautoescape %}
    //console.log(lists)
    //list = ['1_3', '1_4', '4_4', '4_5', '4_6', '4_7', '4_8']
    {#list =list.split(',')#}
    $(document).ready(function() {
        //发起ajax请求确定list
        var $cart = $('#seats_chose'), //座位区
            $tickects_num = $('#tickects_num'), //票数
            $total_price = $('#total_price'); //票价总额
        var sc = $('#seat_area').seatCharts({
            map: [//座位结构图 a 代表座位; 下划线 "_" 代表过道
                'cccccccccc',
                'cccccccccc',
                '__________',
                'cccccccc__',
                'cccccccccc',
                'cccccccccc',
                'cccccccccc',
                'cccccccccc',
                'cccccccccc',
                'cc__cc__cc'
            ],
            naming: {//设置行列等信息
                top: false, //不显示顶部横坐标（行）
                getLabel: function(character, row, column) { //返回座位信息
                    return column;
                }
            },
            legend: {//定义图例
                node: $('#legend'),
                items: [
                    ['c', 'available', '可选座'],
                    ['c', 'unavailable', '已售出']
                ]
            },
            click: function() {
                if (this.status() == 'available') { //若为可选座状态，添加座位
                    $('<li>' + (this.settings.row + 1) + '排' + this.settings.label + '座</li>')
                        .attr('id', 'cart-item-' + this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($cart);
                    $tickects_num.text(sc.find('selected').length + 1); //统计选票数量
                    $total_price.text((getTotalPrice(sc) + price).toFixed(2));//计算票价总金额
                    //加入座位
                    pot = this.settings.row+ 1 +"-"+this.settings.label
                    seatselect.push(pot)
                    return 'selected';
                } else if (this.status() == 'selected') { //若为选中状态
                    //删除数据中对应数据
                    pot = this.settings.row+ 1 +"-"+this.settings.label
                    seatselect.forEach(function (item,index,arr){
                        if (item === pot) {
                            arr.splice(index,1);
                        }
                    });
                    $tickects_num.text(sc.find('selected').length - 1);//更新票数量
                    $total_price.text(getTotalPrice(sc) - price);//更新票价总金额
                    $('#cart-item-' + this.settings.id).remove();//删除已预订座位
                    return 'available';
                } else if (this.status() == 'unavailable') { //若为已售出状态
                    return 'unavailable';
                } else {
                    return this.style();
                }
            }
        });
        //设置已售出的座位
        //['1_3', '1_4', '4_4', '4_5', '4_6', '4_7', '4_8']
        sc.get(list).status('unavailable');

    });



    function getTotalPrice(sc) { //计算票价总额
        var total = 0;
        sc.find('selected').each(function() {
            total += price;
        });
        total.toFixed(2)
        return total;
    }
    </script>

{% endblock %}
